const BLANK = '　';
const RULE_TEXT = `规则：
1、每步可以落1个子或者移动1个子，每方在棋盘上不能同时存在超过3个子
2、每次移动棋子要么按象棋规则移动，要么移到相邻一格但不能吃子
3、将/帅被吃掉则输
`

class UI {
  constructor(width, height) {
    this.game = null;
    this.width = width;
    this.height = height;
    this.box = { black: null, red: null };
    this.view = { start: null, game: null };
    [this.board, this.startButton, this.ruleButton, this.backButton,
    this.box.black, this.box.red,
    this.view.game, this.view.start] =
      ['board-table', 'start-button', 'rule-button', 'back-button',
        'black-box', 'red-box',
        'game-view', 'start-view']
        .map(x => document.getElementById(x));

    this.startButton.onclick = () => this.start();
    this.ruleButton.onclick = () => alert(RULE_TEXT);
    this.backButton.onclick = () => this.end();

    this.table = Array.from(Array(width), () => new Array(height));
    this.lastPick = null;

    for (let y = 0; y < height; ++y) {
      let tr = document.createElement('tr');
      for (let x = 0; x < width; ++x) {
        let td = document.createElement('td');
        td.onclick = () => this.choose('table', td, { x, y });
        this.table[x][y] = td;
        tr.appendChild(td);
      }
      this.board.appendChild(tr);
    }
  }

  start() {
    this.game = new Game(this);
    for (let x = 0; x < this.width; ++x) {
      for (let y = 0; y < this.height; ++y) {
        this.table[x][y].innerHTML = BLANK;
        this.table[x][y].style.color = null;
      }
    }

    for (let color of COLORLIST) {
      this.box[color].innerHTML = '';
      for (let index in this.game.box[color]) {
        let m = this.game.box[color][index];
        let td = document.createElement('td');
        td.innerHTML = m.name;
        td.style.color = m.color;
        td.onclick = () => this.choose('box', td, { color, index });
        this.box[color].appendChild(td);
      }
    }

    this.view.start.style.display = 'none';
    this.view.game.style.display = 'flex';
  }

  end(winColor) {
    if (winColor) alert(winColor + ' win!');
    this.view.game.style.display = 'none';
    this.view.start.style.display = 'block';
  }

  choose(type, td, pos) {
    if (!this.lastPick) {
      if (td.innerHTML == BLANK || td.style.color != this.game.turn) return;
      this.lastPick = { type, td, pos };
      td.style.backgroundColor = '#dddddd';
      return;
    }
    if (type == 'table') {
      if (this.lastPick.type == 'table') {
        this.game.move(this.lastPick.pos, pos);
      }
      else {
        this.game.add(this.lastPick.pos, pos);
      }
    }
    this.lastPick.td.style.backgroundColor = null;
    this.lastPick = null;
  }

  setTable({ x, y }) {
    let m = this.game.table[x][y];
    let td = this.table[x][y];
    td.innerHTML = m ? m.name : BLANK;
    td.style.color = m ? m.color : null;
  }

  removeFromBox({ color, index }) {
    this.box[color].childNodes[index].innerHTML = BLANK;
  }
}